<div class="devui-checkbox {{cssClass}}"
     [ngClass]="{active: checked, halfchecked: halfchecked, disabled: disabled, unchecked: !checked}">
  <label title="{{isShowTitle ? label: ''}}" (click)="toggle($event)">
    <input [name]="name || ('checkbox-' + id)" class="devui-checkbox-input" type="checkbox" [attr.checked]="checked"
           [disabled]="disabled" [attr.indeterminate]="halfchecked"
           (click)="$event.stopPropagation();" (change)="$event.stopPropagation();"/>
    <span class="devui-checkbox-material" [ngStyle]="{'border-color': checked? color : ''}"
          [ngClass]="{'custom-color':color}">
      <span class="devui-checkbox-bg" [ngStyle]="{'background-color': color? (color) : ''}"
            [ngClass]="{'devui-no-animation': !animationUnlocked}"></span>
      <svg class="devui-checkbox-tick " version="1.1" xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
        <polyline class="devui-tick" points="2.6,11 6.9,15.2 17.4,4.8"
                  [ngClass]="{'devui-no-animation': !animationUnlocked}"/>
      </svg>
    </span>
    <ng-template [ngIf]="!!label && !labelTemplate">{{label}}</ng-template>
    <ng-template [ngIf]="!!labelTemplate" [ngTemplateOutlet]="labelTemplate"
                 [ngTemplateOutletContext]="{ $implicit: this, checked:checked, halfchecked: halfchecked,
                  disabled:disabled, label: label}">
    </ng-template>
  </label>
</div>
